CSS 三大特性
层叠性
相同选择器给设置相同的样式,此时一个样式就会覆盖((层叠)另一个冲突的样式,层叠性主要解决样式冲突的问题。
层叠性原则:
子标签会继承父标签的部分样式(如字体颜色和字号)。恰当地使用继承可以简化代码,降低 CSS 样式的复杂性。
优先级
当同一个元素指定多个选择器,就会有优先级的产生。
选择器相同,则执行层叠性
选择器不同,则根据选择器权重执行:**!important > 行内 > id > 类 > 元素 > * > 继承**
权重叠加:如果是复合选择器,则会有权重叠加,需要计算权重。
提示!!!
继承的权重是 0。如果该元素没有直接选中,不管父元素权重多高,子元素得到的权重都是 0浏览器私有前缀
浏览器私有前缀是为了兼容老版本的写法,比较新版本的浏览器无须添加。
-moz- : 代表 firefox 浏览器私有属性
-ms- : 代表 ie 浏览器私有属性
-wetkit- : 代表 safari、chrome 私有属性
-o- : 代表 Opera 私有属性
常用布局技巧
引入 CSS
提示!!!
CSS正常是写在body前的,如果写在body中会导致CSS重新渲染一次页面,占用一定的时间
1 | <link rel="stylesheet" href="CSS文件路径"> |
单行文字垂直居中
让文字的行高等于盒子的高度
1 | p { |
美化进度条
1 | ::-webkit-scrollbar { |
calc 函数
calc() 函数在声明 CSS 属性值时执行一些计算,括号里面可以使用 +、-、*、/ 来进行计算。
提示!!!
运算符必须有空格
1 | div { |
CSS 初始化
为了让不同的浏览器在渲染网页元素的时候形式更统一
1 | * { |
CSS 属性书写顺序
- 布局定位属性: display / position/ float / clear / visibility / overflow (建议 display 第一个写)
- 自身属性: width / height / margin / padding / border/ background
- 文本属性: color / font / text-decoration / text align/ vertical-align / white- space / break-word
- 其他属性(CSS3 ) : content / cursor / border-radius/ box- shadow / text shadow/ background:linear-gradien
CSS 单位
标签选择器
1 | <h2></h2> |
ID 选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式
1 | <h2 id="#ID名称"></h2> |
类选择器
1 | <h2 class="类名称"></h2> |
通配符选择器
通配符选择器 表示选取页面中所有元素
1 | * { |
后代选择器
后代选择器又称为包含选择器,可以选择元素面子元素。
当标签发生嵌套时,内层标签就成为外层标签的后代。
1 | <元素1> |
子元素选择器
子元素选择器 只能选择作为玩素的最近一级子元素(简单理解是选子元素)
提示!!!
和后代选择器的区别是:子选择器只能作用于第一代后代,对其他后代不起作用。而后代选择器是作用于所有子后代元素。
1 | <父元素> |
并集选择器
并集选择器可以选择多组标签同时为他们定义相同的样式,通常用于集体声明
1 | 元素1, |
伪类选择器
伪类选择器用于向某些选择器添加特殊的效果,比如给链接添加特殊效果,或选择第 1 个,第 n 个元素
- 链接伪类选择器
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16/* 选择未被访问的链接*/
a:link {
属性名: 值;
}
/* 选择已被访问的链接 */
a:visited {
属性名: 值;
}
/* 选择未鼠标指针位于其上的链接 */
a:hover {
属性名: 值;
}
/* 选择未鼠标按下未弹起的链接 */
a:active {
属性名: 值;
} - :focus 伪类选择器
:focus 伪类选择器用于选取当前焦点的表单元素
提示!!!
一般情况只有<input>
元素才能获取1
2
3input:focus {
属性名: 值;
}
属性选择器
属性选择器可以根据元素特定属性的来选择元素。这样就可以不用借助于类或者 id 选择器
- 选择有特定属性的元素
1
2
3
4
5
6
7
8<元素 属性/>
<input type="text" />
元素[属性] {
属性名: 值;
}
input[type] {
属性名: 值;
} - 选择符合指定属性的元素
1
2
3
4
5
6
7
8<元素 属性="值"/>
<input type="text" />
元素[属性="值"] {
属性名: 值;
}
input[type="text"] {
属性名: 值;
} - 匹配具有指定属性,且以值开头的所有元素
1
2
3
4
5
6
7
8
9
10
11
12
13
14<元素 属性="值1"></div>
<元素 属性="值2"></div>
<div class="icon1"></div>
<div class="icon2"></div>
<div class="icon3"></div>
<div class="icon4"></div>
元素[属性^="值"] {
属性名: 值;
}
div[class^="icon"] {
属性名: 值;
} - 匹配具有指定属性,且以值结尾的所有元素
1
2
3
4
5
6
7
8
9
10
11
12<元素 属性="1值"></元素>
<元素 属性="2值"></元素>
<i class="icon1-data"></i>
<i class="icon2-data"></i>
元素[属性$="值"] {
属性名: 值;
}
i[class$="data"] {
属性名: 值;
} - 匹配具有指定属性,且包含值的所有元素
1
2
3
4
5
6
7
8
9
10
11
12<元素 属性="值"></元素>
<元素 属性="值"></元素>
<i class="icon1-ui-data"></i>
<i class="icon2-ui-data"></i>
元素[属性*="值"] {
属性名: 值;
}
i[class*="ui"] {
属性名: 值;
}
结构伪类选择器
结构伪类选择器主要根据文档结构来选择器元素,常用于根据父级选择器里面的子元素
提示!!!nth-child(n)
与 nth-of-type(n)
的区别:
:nth-child(n)
选择器匹配属于其父元素的第 N 个子元素,不论元素的类型:nth-of-type(n)
选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素
提示!!!1
nth-child(n)`、`nth-of-type(n)
n 可以为数字:表示选择子元素的位置,从 1 开始
n 可以为关键字:event 偶数,odd 奇数
n 可以是公式:2n(偶数),2n+1(奇数),5n(5 10 15 …),n+5([5,∞]),-n+5([1,5])
1
2
3
4
5
6<ul>
<li>我是第1个</li>
<li>我是第2个</li>
<li>我是第3个</li>
<li>我是第4个</li>
</ul>nth-child(n)
- 选择第一个子元素
1
2
3
4
5
6
7父元素 :first-child {
属性名: 值;
}
ul :first-child {
属性名: 值;
} - 选择最后一个子元素
1
2
3
4
5
6
7父元素 :last-child {
属性名: 值;
}
ul :last-child {
属性名: 值;
} - 选择指定子元素
1
2
3
4
5
6
7父元素 :nth-child(位置) {
属性名: 值;
}
ul :nth-child(3) {
属性名: 值;
} - 选择所有子元素
提示!!!
此处必须是 n,其他字母无效1
2
3父元素 :nth-child(n) {
属性名: 值;
} - 选择偶数子元素
选择所有子元素的偶数位置1
2
3父元素 :nth-child(even) {
属性名: 值;
} - 选择奇数子元素
选择所有子元素的奇数位置1
2
3父元素 :nth-child(odd) {
属性名: 值;
}
- 选择第一个子元素
nth-of-type(n)
- 选择第一个子元素
1
2
3
4
5
6
7父元素 子元素:first-of-type {
属性名: 值;
}
ul li:first-of-type {
属性名: 值;
} - 选择最后一个子元素
1
2
3
4
5
6
7父元素 子元素:last-of-type {
属性名: 值;
}
ul li:last-of-type {
属性名: 值;
} - 选择任意子元素
1
2
3
4
5
6
7父元素 子元素:nth-of-type(位置) {
属性名: 值;
}
ul li:nth-of-type(3) {
属性名: 值;
} - 选择所有子元素
提示!!!
此处必须是 n,其他字母无效1
2
3父元素 子元素:nth-of-type(n) {
属性名: 值;
} - 选择偶数子元素
选择所有子元素的偶数位置1
2
3父元素 子元素:nth-of-type(even) {
属性名: 值;
} - 选择奇数子元素
选择所有子元素的奇数位置1
2
3父元素 子元素:nth-of-type(odd) {
属性名: 值;
}
- 选择第一个子元素
伪元素选择器
伪元素选择器可以帮助我们利用 CSS 创建新标签元素,而不需要 HTML 标签,从而简化 HTML 结构
提示!!!
- 伪元素选择器 创建的元素在 DOM 中无法找到,所有被称为伪元素
- 伪元素选择器 创建的元素属于行内元素,默认无法改变大小(需要转为块级元素)
1
<div></div>
- 在元素内部的前面插入内容
1
2
3div::before {
content: "内容";
} - 在元素内部的后面插入内容
1
2
3div::after {
content: "内容";
}元素显示模式
元素显示模式指元素(标签)以什么方式进行显示
HTML 元愫一般分为块元素和行内元素两种类型:
块元素
常见的块元素有<h1>
-<h6>
、<p>
、<div>
、 <ul>
、 <ol>
、<li>
等,其中<div>
标签是最典型的块元素
块级元素的特点:
- 独占一行
- 高度、宽度、外边距以及内边距都可以控制
- 宽度默认是容器(父级宽度)的 100%
- 是一个容器及盒子,里面可以放行内或者块级元素
注意!!!
字类的元素内不能使用块级元素:
<p>
标签主要用于存放文字,因此<p>
里面不能放块级元素(特别是<div>
)<h1>
-<h6>
等都是文字类块级标签,里面也不能放其他块级元素
行内元素
常见的行内元素有 <a>
、<strong>
、 <b>
.、<em>
、<i>
、 <del>
. <S>
、 <ins>
、<u>
、<span>
等,其中<span>
标签是最典型的行内元素。有的地方也将行内元素称为内联元素。
行内元素的特点:
- 相行内元素在一行上, 一行可以示多个。
- 高、宽直接设置是无效的。
- 默认宽度是它本身内容的宽度。
- 行内元素只能容纳文本或其他行内元素。
行内块元素
在行内元素中有几个特殊的标签:<img/>
、<input/>
、<td>
,它们同时具有块元素和行内元素的特点。有些资料称它们为行内块元素。
行内块元素的特点:
- 和相邻行内元素(行内块)在一行上,但是他们之间会有空白缝隙。一行可以多个(行内元素特点)
- 默认宽度是它本身内容的宽度(行内元素特点)。
- 高度、行高、外边距以及内边距都可以控制(块级元素特点)。
元素显示模式转换
盒子模型:把 HTML 面中的布局元素看作是一个矩形的盒子,也就是一个盛装内容的容器。
CSS 子模型本质上是一个盒子,封装周围的 HTML 元素,它包括:边框、外边距、内边距、和实际内容
内边距
padding 属性用于设置内边距,即边框与内容之间的距离
提示!!!
如果盒子本身没有指定 width/height 属性,则此时 padding 不会撑开盒子大小
1 | div { |
外边距
margin 属性用于设置外边距,即控制盒子和盒子之间的距离
1 | div { |
- 水平居中
- 块级元素
1
2
3div {
margin: 0 auto;
} - 行内元素、行内块元素
1
2
3div {
text-align: center;
}
- 块级元素
- 嵌套块元素垂直外边距的塌陷
对于两个嵌套关系(父好关系)的块元素,元素有上外边距同时子元素也有上外边距,此时父元素会塌陷较大的外边距值
解决方法:- 为父元素定义上边框
- 为父元素定义上内边距
- 为父元素添加
overflow: hidden
清除内外边距
网页元素很多都带有默认的内外边距,且不同浏榄器默认的也不一致。 因此我们在布局前,首先要清除下网页元素的内外边距。
1 | * { |
提示!!!
行内元素为了照顾兼容性,尽量只设置左右内外边距,不要设置上下内外边距。但是转换为块级和行内块元素就可以了
box-sizing
box- sizing 可以指定盒模型,计算盒子大小的方式可以发生改变
1 | div { |
网页布局流
实际开发中,一个页面基本都包含了这三种布局方式
普通流(文档流)
标签按照规定好默认方式排列
- 块级元素会独占一行,从上向下顺序排列
- 行内元素会按照顺序,从左到右顺序排列,碰到父元边缘则自动换行
浮动流
可以让多个块级元素一行显示或者左右对齐盒子,多个块级盒子水平显示就用浮动布局
定位流
定位最大的特点是有层叠的概念,可以让多个盒子前后桑压来显示。如果元素自由在某个盒子内移动就用定位布局
字体
字体属性
- 设置字体
1
2
3
4
5p {
font-family: "字体名";
/* 指定多个字体时,依次按照顺序查找当前可用字体 */
font-family: "字体1","字体2";
} - 设置大小提示!!!
1
2
3p {
font-size: 字体大小;
}
默认浏览器字体大小为 16px - 字体粗细
1
2
3
4
5
6
7
8
9
10p {
/* 正常字体 */
font-weight: normal;
/* 粗体 */
font-weight: 700;
font-weight: bold;
/* 细体 */
font-weight: 400;
font-weight: normal;
} - 斜体
1
2
3
4
5
6p {
/* 正常字体 */
font-style: normal;
/* 斜体 */
font-style: italic;
} - 复合属性提示!!!
1
2
3p {
font: font-style font-weight font-size font-family;
}
不需要设置的属性可以省略(取默认值),但必须保留 font-size 和 font-family 属性,否则 font 属性将不起作用
网络字体
- 加载单个字体
1
2
3
4@font-face {
font-family: 字体名称;
src: url(字体网址);
} - 加载多个字体格式(适配兼容性)
1
2
3
4
5
6@font-face {
font-family: 字体名称;
src: url(字体网址),
url(字体网址),
url(字体网址);
}
字体图标
阿里巴巴矢量图标库 (opens new window)Icomoon 图标库(opens new window)
提示!!!
可直接引入下载的 CSS(注意增加 class)
1 | @font-face { |
- 常规使用
1
2
3
4<span>字体图标代码</span>
span {
font-family: 字体图标名称;
} - 伪元素使用
1
<span class="iconfont 字体图标名称"></span>
CSS 属性
文本属性
- 文本颜色
1
2
3
4
5
6
7
8
9p {
/* 十六进制颜色(常用) */
color: #fff;
/* 英文颜色 */
color: red;
/* RGB代码 */
color: rgb(r, g, b);
color: rgb(100%, 0%, 0%);
} - 对齐文本
1
2
3
4
5
6
7
8p {
/* 左对齐(默认) */
text-align: left;
/* 居中对齐 */
text-align: center;
/* 右对齐 */
text-align: right;
} - 装饰文本
CSS Text 属性可定义文本的外观,比如文本的颜色、对齐文本、 装饰文本、文本缩进、行间距等1
2
3
4
5
6
7
8
9
10p {
/* 默认,无装饰线(常用) */
text-decoration: none;
/* 下划线 */
text-decoration: underline;
/* 上划线(几乎不用) */
text-decoration: overline;
/* 删除线(不常用) */
text-decoration: line-through;
} - 文本缩进
text-indent 属性用来指定文本的第一行的缩进,通常是将段落的首行缩进提示!!!1
2
3
4p {
/* 文本的第一行缩进 */
text-indent: 2em;
}
2em 为 2 个文字大小 - 行间距
line-height 属性用于设置行间的距离(行高)。可以控制文字行与行之间的距离.提示!!!1
2
3p {
line-height: 10px;
}
行间距有上间距与下间距,两者大小相同
背景
背景颜色
1
2
3div {
background-color: red;
}背景图片
1
2
3
4
5div {
/* 无背景图(默认) */
background-image: none;
background-image: url(图片路径);
}背景平铺
1
2
3
4
5
6
7
8
9
10div {
/* 背景图片横向纵向平铺(默认) */
background-repeat: repeat;
/* 背景图片不平铺 */
background-repeat: no-repeat;
/* 背景图片横向平铺 */
background-repeat: repeat-x;
/* 背景图片纵向平铺 */
background-repeat: repeat-y;
}背景图片位置
background-position 属性可以改变图片在背景中的位置1
2
3
4
5
6
7
8div {
/* 顶部水平居中 */
background-position: top center;
/* 精确单位(X轴坐标,Y轴坐标) */
background-position: 20px, 20px;
/* 混合单位,水平居中,顶部20px */
background-position: center, 20px;
}背景大小
background-size 属性规定背景图片的尺寸1
2
3
4
5
6
7
8div {
/* 指定背景图片大小 */
background-size: 100px 100px;
/* 图像图像缩放拉伸,完全占满背景 */
background-size: cover;
/* 背景图像等比例拉伸 */
background-size: contain;
}背景图像固定
background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。可以制作视差滚动的效果。1
2
3
4
5
6body {
/* 背景图像是随对象内容滚动(默认) */
background-attachment: scroll;
/* 背景图像固定 */
background-attachment: fixed;
}背景复合写法
为了简化背景属性的代码,可以将多个属性合并简写在同一个属性 background 中,从而节约代码量
提示!!!
没有特定的书写顺序,这只是一般习惯约定顺序1
2
3body {
background: 背景颜色 图片地址 背景平铺 图像滚动 图片位置;
}背景色半透明
CSS3 为我们提供了背景颜色半透明的效果。最后一个参数为 Alpha 透明度,取值范围为(0,1),值越低越透明。1
2
3div {
background: rgba(0, 0, 0, 0.5);
}提示!!!
盒子内容不受影响,设置的仅仅是盒子背景半透明
边框
- 为元素增加边框
1
2
3
4
5
6
7
8
9
10div {
/* 无边框(默认) */
border: none;
/* 实线边框 */
border: 边框宽度 solid 边框颜色;
/* 虚线边框 */
border: 边框宽度 dashed 边框颜色;
/* 点线边框 */
border: 边框宽度 dotted 边框颜色;
} - 圆角边框
radius 半径(圆的半径)原理: 圆与边框的交集形成圆角效果1
2
3
4
5
6
7
8
9
10div {
/* 圆角 */
border-radius: 16px;
/* 上 右 下 左 圆角 */
border-radius: 1px 1px 1px 1px;
/* 圆角矩形(半径为高度的一半) */
border-radius: 16px;
/* 圆形(半径为宽度和高度的一半) */
border-radius: 50%;
}
阴影
盒子阴影
语法:box-shadow: 水平阴影位置 垂直阴影位置 [模糊距离(阴影虚实)] [阴影大小] [阴影颜色] [内部/外部阴影]
1
2
3
4div {
box-shadow: 0 0;
box-shadow: 0 0 -4px rgba(0, 0, 0.5);
}提示!!!
- 盒子阴影不占用空间,不会影响其他盒子排列
- 默认的是外阴影(outset),但是不可以写这个单词,否则导致阴影无效
文字阴影
语法:text-shadow: 水平阴影位置 垂直阴影位置 [模糊距离(阴影虚实)] [阴影颜色]
1
2
3
4div {
text-shadow: 0 0;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
}
元素的显示、隐藏
- display 属性(常用)
display 隐藏元素后,不再占有原来的位置1
2
3
4
5
6div {
/* 隐藏元素 */
display: none;
/* 转换块级元素并显示元素 */
display: block;
} - visibility 可见性
vibility 隐藏元素后,继续占有原来的位置1
2
3
4
5
6div {
/* 隐藏元素 */
visibility: hidden;
/* 显示元素 */
visibility: visible;
} - overflow 溢出
overflow 属性指定了如果内容溢出一个元素的框 (超过其指定高度及宽度)时,会发生什么
提示!!!
如果有定位的盒子,请慎用overflow: hidden
,因为它会隐藏多余的部分1
2
3
4
5
6
7
8
9
10div {
/* 内容溢出时依然显示溢出内容(默认) */
overflow: visible;
/* 内容溢出时隐藏溢出内容 */
overflow: hidden;
/* 显示滚动条(无论内容是否溢出) */
overflow: scroll;
/* 在需要的时候自动显示滚动条 */
overflow: auto;
}
溢出文本显示省略号
- 单行文本溢出显示省略号
1
2
3
4
5
6
7
8
9
10p {
display: inline-block;
width: 100%;
/* 强制显示一行文本 */
white-space: nowrap;
/* 超出部分隐藏 */
overflow: hidden;
/* 设置超出隐藏部分的文本 */
text-overflow: ellipsis;
} - 多行文本溢出显示省略号
提示!!!
多行文本溢出显示省略号,有较大兼容性问题,适合于 webKit 浏览器(移动端)
提示!!!
更推荐让后台人员来做这个效果,后台人员可以设置显示多少个字,操作更简单1
2
3
4
5
6
7
8
9
10
11
12p {
/* 超出部分隐藏 */
overflow: hidden;
/* 设置超出隐藏部分的文本 */
text-overflow: ellipsis;
/* 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 限制在一个块元素 显示的文本的行数*/
-webkit-line-clamp: 2;
/* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;
}
三角形
- 等腰三角形
1
2
3
4
5
6
7
8
9div {
width: 0;
height: 0;
line-height: 0;
font-size: 0;
border: 10px solid transparent;
/* 可设置颜色位置改变三角形的朝向 */
border-left-color: black;
} - 直角三角形
1
2
3
4
5div {
border-color: transparent red transparent transparent;
border-style: solid;
border-width: 100px 50px 0 0;
}
鼠标样式
1 | div { |
轮廓线
去除默认的蓝色焦点边框
1 | input { |
防止拖拽文本域
去除文本域右下角的拖拽小按钮
1 | textarea { |
vertical-align
用于设置一个元素的垂直对齐方式,但是它只针对于行内元素或者行内块元素有效
1 | <!-- 文字 --> |
解决图片底部空白间隙
- 给图片增加
vertical-align: top | middle | bottom
1 | img { |
- 将图片转为块级元素
1 | img { |
图片模糊
filter CSS 属性将模糊或颜色偏移等图形效果应用于元素。数值越大越模糊
1 | img { |
CSS3 过渡
过渡(transition)是 CSS3 中具有颠覆性的特征之一,当元素从一种样式变换为另一种样式时为元素添加效果
语法:transition: 要过渡的属性 花费时间 [运动曲线] [开始时间]
提示!!!
谁做过渡给谁加过渡属性
1 | div { |
过度方式:
- ease : 规定慢速开始,然后变快
- ease-in : 以慢速开始
- ease-out : 以慢速结束
- linear : 以相同速度开始至结束
2D 转换
转换可以实现元素的位移、旋转、缩放等效果
- 移动
2D 移动是 2D 转换里面的一种功能,可以改元素在页面中的位置,类似定位。
语法:transform: translate(X轴移动位置, Y轴移动位置)
提示!!!
translate 内的百分比是盒子自身的百分比移动特点:1
2
3
4
5
6
7
8div {
/* 移动X轴、Y轴坐标 */
transform: translate(10px, 10px);
/* 移动X轴坐标 */
transform: translateX(10px);
/* 移动Y轴坐标 */
transform: translateY(10px);
} - 定义 2D 转换中的移动,沿着 X 和 Y 轴移动元素
- translate 最大的优点:不会影响到其他元素的位置(类似于相对定位)
- translate 中的百分比单位是相对于自身元素的 translate:(50%, 50%);
- 对行内标签没有效果
- 旋转
2D 旋转指的是让元素在 2 维平面内顺时 t 旋转或者逆时针旋转
提示!!! - 默认旋转的中心点为元素的中心点
- 角度为正数为顺时针,负数为逆时针
语法:transform: rotate(度数);
1
2
3div {
transform: rotate(45deg);
} - 设置转换中心点
语法:transform-origin: x y;
1
2
3
4
5
6div {
/* 设置中心点为中间(默认) */
transform-origin: center center;
/* 设置中心点为左下角 */
transform-origin: left bottom;
} - 缩放
控制放大和缩小。sacle 缩放的优势:可以设置转换中心点缩放,默认以中心点缩放,而且不影响其他盒子
语法:transform: scale(x,y);
提示!!!
缩放倍数不能为负数1
2
3
4
5
6
7
8
9
10div {
/* 宽和高放大一倍(相对于没有放大) */
transform: scale(1, 1);
/* 宽和高放大2倍 */
transform: scale(2, 2);
/* 宽和高放大2倍 */
transform: scale(2);
/* 宽和高缩小1.5倍 */
transform: scale(0.5, 0.5);
}
3D 转换
- 3D 移动
3D 移动在 2D 移动的基础多加了一个可以移动的方向:z 轴方向
提示!!! - X 轴坐标、Y 轴坐标 不能省略,没有可写 0
- Z 轴正值为向屏幕外移动,负值为向屏幕内移动
1
2
3div {
transform: translate3d(X轴坐标, Y轴坐标, Z轴坐标);
} - 透视
在 2D 平面产生近大远小视觉立体,但是只是效果二维的。如果想要在网页产生 3D 效果需要透视(理解成 3D 物体投影在 2D 平面内)
提示!!! - 透视要写在被观察元素的父元素上
- 透视越小,元素越大
1
2
3div {
perspective: 10px;
} - 3D 旋转
3D 旋转指可以让元素在三维平面内沿着 x 轴、y 轴、z 轴或者自定义轴进行旋转
提示!!! - 透视要写在被观察元素的父元素上
- 透视越小,元素越大
1
2
3
4
5
6
7
8div {
/* 沿X轴旋转(正值为向屏幕方向旋转) */
transform: rotateX(180deg);
/* 沿Y轴旋转(正值为向屏幕方向旋转) */
transform: rotateY(180deg);
/* 沿Z轴旋转(效果即为单纯的平面旋转) */
transform: rotateZ(180deg);
} - 3D 呈现
控制子元素是否开启三维立体环境,默认没有开启 3D 立体空间
提示!!!
3D 呈现要写在父元素上1
2
3div {
transform-style: preserve-3d;
}浮动
提示!!!
浮动起初并不是用来布局,而是图文环绕。 尽量不要使用浮动布局,使用 Flex 布局
有很多的布局效果,标准流没有办法完成,此时就可以利用浮动完成布局。因为浮动可以改变元素标签默认的排列方式。
浮动最典型的应用:可以让多个块级元素一行内排列显示
float 属性用于创建浮动框,将其移动到一边,直到左边缘或右边缘触及包含块或另一个浮动框的边缘。
语法:float: 属性值
1 | div { |
浮动特性
- 浮动元素会脱离标准流(脱标):
- 浮动的盒子不再保留原先的位置
- 浮动的元素会一行内显示并且元素顶部对齐
- 浮动的元素会具有行内块元素的特性:
- 任何元素都可以浮动。不管原先是什么模式的元素,添加浮动之后具有行内块元素相似的特性
- 如果块级盒子没有设置宽度,默认宽度和父级一样宽,但是添加浮动后,它的大小根据内容来决定的
清除浮动
为什么要清除浮动
- 由于父级盒子很多情况下,不方便给高度,但是子盒子浮动又不占有位置,后父级盒子高度为 0 时,就会影响下面的标准流盒子。
- 由于浮动元素不再占用原文档流的位置,所以它会对后面的元素排版产生影响
清除浮动本质
- 清除浮动的本质是清除浮动元素造成的影响
- 如果父盒子本身有高度,则不需要清除浮动
语法:clear: both;
1
2
3
4
5
6
7
8div {
/* 同时清除左右两侧浮动的影响(常用) */
clear: both;
/* 同时清除左侧浮动的影响 */
clear: left;
/* 同时清除右侧浮动的影响 */
clear: right;
}
定位
提示!!!
如果一个盒子既有 left 属性也有 right 属性,则默认会执行 left 属性
静态定位
静态定位是元素的默认定位方式(无定位)
1 | div { |
相对定位
相对定位是元素在移动位置的时候,是相对于它原来的位置
1 | div { |
相对定位特点:
- 它是相对于自己原来的位置来移动(移动位置的时候参照点是自己原来的位置)
- 原来在标准流的位置继续有,后面的盒子仍然以标准流的方式对待它(不脱标,继续保留原来位置)
绝对定位
绝对定位是元素在移动位置的时候,是相对于它祖先元素
1 | div { |
绝对定位特点:
- 如果没有祖先元素或者祖先元素没有定位,则以浏览器为准定位
- 如果祖先元素有定位(相对、绝对、固定定位),则以最近一级的有定位祖先元索为参考点移动位置
- 绝对定位不再占有原先的位置
- 水平居中算法
1
2
3
4
5
6
7div {
position: absolute;
/* 向右移动父容器的一半 */
left: 50%;
/* 向左移动自身宽度的一半 */
margin-left: -50%;
} - 垂直居中算法
1
2
3
4
5
6
7div {
position: absolute;
/* 向下移动父容器的一半 */
top: 50%;
/* 向上移动自身高度的一半 */
margin-top: -50%;
}
子绝父相
当子级是绝对定位时,父级要用相对定位
- 子级绝对定位,不会占有位置,可以放到父盒子里面的任何一个地方,不会影响其他的兄弟盒子。
- 父盒子需要加定位限制子盒子在父盒子内显示
- 父盒子布局时,需要占有位置,因此父盒子只能是相对定位。
固定定位
固定定位是元素固定于浏览器可视区的位置。主要使用场景:可以在浏览器页面滚动时元素的位置不会改变
1 | div { |
固定定位特点:
- 以浏览器的可视窗口为参照点移动元素
- 跟父元素没有任何关系
- 不随滚动条滚动
- 固定定位不占有原先的位置
粘性定位(了解)
粘性定位可以被认为是相对定位和固定定位的混合。可以用做吸顶效果
提示!!!
粘性定位兼容性较差,不支持 IE 浏览器
1 | div { |
粘性定位特点:
- 以浏览器的可视窗口为参照点移动元素(固定位特点)
- 粘性定位占有原先的位置(相对定位特点)
- 必须添加 top、left、right、bottom 其中一个才有效
定位叠放次序
在使用定位布局时,可能会出现盒子重叠的情况。此时可以使用 z-index 来控制盒子的前后次序(Z 轴)
提示!!!
- 只有定位的盒子才有 z-index 属性
- 数值可以是正整数、负整数或 0,默认是 auto。数值越大,越靠上
- 如果属性值相同,则按照书写顺序,后来居上
- 数字后面不能加单位
1 | div { |
定位特殊特性
- 行内元素添加绝对或者固定定位,可以直接设置高度和宽度
- 块级元素添加绝对或者固定定位,如果不给宽度或者高度,默认大小是内容的大小
精灵图
一个网页中往往会应用很多小的背图像作为修饰,当网页中的图像过多时,服务器就会频繁地接收和发送请求图片,造成服务器请求压力过大,这将大大降低页面的加载速度。
因此,为了有效地减少服务器接收和发送请求的次数,提高页面的加载速度,出现了 CSS 精灵技术(也称 CSS Sprites、CS 雪碧)
将网页中的一些小背景图像整合到一张大图中,这样服务器只需要一次请求。
自动生成精灵图样式(opens new window)
提示!!!background-position
和background-size
都是固定的,如需改变大小则先指定这两个值,然后指定宽度和高度
1 | .sprite { |